<template>
  <!-- 柱状图 -->
  <div id="LiquidFill">
    <div ref="chart01" class="chart01"></div>
    <div class="text">{{ Ltext }}</div>
  </div>
</template>

<script>
export default {
  name: "LiquidFill",
  components: {},
  props:{
    Tcolor: {
      type: String,
      default: "green"
    },
    LiquidNum: {
      type: Number,
      default: 34
    },
    Ltext:{
      type: String,
    }
  },
  data() {
    return {
      value: 60,
    };
  },
  computed: {
    CurrentColor(){
      switch (this.Tcolor) {
        case "green":
          return "#71c084"
        case "red":
          return "#ec6e71"
        case "yellow":
          return "#e2d05a"
      }
    },
    changeLiquidNum(){
      // return this.LiquidNum + Number((Math.random()/5).toFixed(1));
      return this.LiquidNum + Math.floor(Math.random() * 49+1);
    }
  },
  watch: {
    // yAxios: {
    //   handler: function (newVal, oldVal) {
    //     this.drawLiquidFill();
    //   },
    //   deep: true,
    //   // immediate: true
    // },
    LiquidNum(){
      this.drawLiquidFill();
    }
  },
  created() {},
  mounted() {
    this.drawLiquidFill();
  },

  methods: {
    drawLiquidFill() {
      let that = this;
      let mychart = that.$echarts.init(that.$refs.chart01);
      let option = {
        backgroundColor: "transparent", //背景色
        series: [
          {
            type: "liquidFill", //水位图
            
            // center: ["50%", "50%"], //中心点
            // amplitude: 20, //水波振幅
            data: [0.5], // data个数代表波浪数
            radius: "80%", //显示比例
            color: [this.CurrentColor], //波浪颜色
            outline: {
                itemStyle: {
                  borderWidth: 2,
                  borderColor: this.CurrentColor,
                },
                borderDistance: 2, //内容距离边框的大小
            },
            backgroundStyle: {
              // color: "#33547e", //内容颜色
              color: "rgba(58,183,193, .2)",
            },
            label: {
              //标签设置
              normal: {
                position: ["50%", "50%"],
                formatter: this.changeLiquidNum+ "", //显示文本,
                textStyle: {
                  fontSize: "42px", //文本字号,
                  color: "#fff",
                  fontWeight: "200",
                },
              },
            },
            
          },
        ],
      };

      mychart.setOption(option);
      //   窗口自适应
      setTimeout(() => {
        let resizeFn = function () {
          mychart.resize();
        };
        window.addEventListener("resize", resizeFn);
        this.$once("hook:beforeDestroy", () => {
          mychart.dispose();
          mychart = null;
          window.removeEventListener("resize", resizeFn);
        });
      }, 200);
    },
  },
};
</script>
<style lang='less' scoped>
#LiquidFill {
  width: 100%;
  height: 100%;
  position: relative;
  // margin-top: 36px;
  .chart01 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    clear: both;
  }
  .text{
    position: absolute;
    left: 50%;
    bottom: 26px;
    transform: translateX(-50%);
    color: #fff;
    font-size: 18px
  }
}
</style>